<template>
  <n-modal
      v-model:show='showModal'
      preset='card'
      :title='title'
      :show-icon='false'
      class='w-800px'
  >
    <!-- 创建和编辑区域 -->
    <mycard v-if="editType === 'add' || editType === 'edit'" class='p-2'>
      <flexform
          ref='flexFormref'
          :formList='formList'
          :formValue='formValue'
      >
      </flexform>
    </mycard>
    <!-- 回显区域 -->
    <mycard v-if="editType === 'view'"> 查看</mycard>

    <!-- 交互成功区域 -->
    <mycard v-if="editType === 'success'">
      <n-result status='success' title='成功' :description='resultText'>
      </n-result>
    </mycard>
    <!-- 交互失败区域 -->
    <mycard v-if="editType === 'error'">
      <n-result status='error' title='错误' :description='resultText'>
      </n-result>
    </mycard>
    <template #action>
      <div class='w-full flex justify-end items-center'>
        <n-button class='mx-1' @click='handleClose'>关闭</n-button>
        <n-button
            class='mx-1'
            v-if="editType === 'add' || editType === 'edit'"
            type='primary'
            @click='handleSave'
        >修改
        </n-button
        >
      </div>
    </template>
  </n-modal>
</template>


<script setup name='changeemail' lang='ts'>
import { FormItemRule, useMessage } from 'naive-ui'
import { useRoute, useRouter } from 'vue-router'
import { openAndClose } from '../../../hooks/useEdit'
import guiling from '../../../util/guiling'
import { ref, watch } from 'vue'
import http from '../../../request/request'

const router = useRouter()
const route = useRoute()
const flexFormref = ref<any>(null) // 表单组件
const formValue = ref<any>({}) // 表单数据
const message = useMessage()
const emit = defineEmits(["close"])
const title = ref("修改手机号码")
// 自定义重置组件的方法
const reset = () => {
  formValue.value = guiling(formValue.value)
}
// 自定义初始化需要执行的方法
const chushihua = (data: any,edittype:"add"|"edit"|"view"|"") => {
  if (data) {
    formValue.value = data
  }
  if(edittype!=="view") {
    gettreeDatefunc()
  }
}
// 从钩子中结构出需要的函数和属性
const {
  showModal,
  editType,
  resultText,
  init,
  handleClose,
  getsuccess,
  getfaild,
} = openAndClose(chushihua, reset,"",emit)

// 数字校验
const checknum = (rule: FormItemRule, value: string) => {
  const regx = /^[1-9]\d*$/
  if (!value) {
    return true
  } else if (value.length > 10) {
    return new Error('请输入长度10位以内正整数')
  } else if (!regx.test(value)) {
    return new Error('请输入长度10位以内正整数')
  } else {
    return true
  }
}

// 表单配置
const formList = ref([
])
const adddisabled = ref([])
const editdisabled = ref([])
watch(editType, () => {
  if (editType.value === 'add') {
    formList.value.forEach(item => {
      if (adddisabled.value.includes(item.key as never)) {
        item.disabled = true
      }else{
        item.disabled = false
      }
    })
  } else if (editType.value === 'edit') {
    formList.value.forEach(item => {
      if (editdisabled.value.includes(item.key as never)) {
        item.disabled = true
      }else{
        item.disabled = false
      }
    })
  }
})

// 点击确定
const handleSave = () => {
  flexFormref.value && flexFormref.value.jiaoyan((data)=>{
    http.changepwd(data).then(res=>{
      if(res.data.code===0){
        getsuccess("密码修改成功")
      }else{
        getfaild(res.data.error)
      }
    })
  })
}



// 点击返回
const getreturn = () => {
  editType.value = 'edit'
  resultText.value = ''
}

// 获取菜单的属性数据
const gettreeDatefunc = () => {
  http.zidiantree({}).then(res => {
    if (res.data.code == 0) {
      formList.value.forEach(item => {
        if (item.key === 'parent') {
          item.options = res.data.items
        }
      })
    }
  }).catch(err => {
    message.error(err || '查询失败')
  })
}

// 抛出属性和方法
defineExpose({ init, handleClose })
</script>

<style scoped>
</style>
